Component এর মধ্যে Contextual Components

Contextual Components হল Ember.js এর একটি শক্তিশালী বৈশিষ্ট্য, যা আপনাকে একটি কম্পোনেন্টের মধ্যে অন্য কম্পোনেন্টগুলো কনটেক্সচুয়ালি (contextually) রেন্ডার করার সুযোগ দেয়। এটি "block-level components" নামে পরিচিত এবং আপনি এটি যখন কোনও কম্পোনেন্টের মধ্যে টেমপ্লেটের ব্লক হিসেবে ব্যবহার করতে চান।

Contextual Components আপনাকে একটি কম্পোনেন্টের ভেতরে আরও এক বা একাধিক কম্পোনেন্ট রেন্ডার করতে দেয়, তবে এই কম্পোনেন্টগুলোর আচরণ এবং কনটেন্ট অভ্যন্তরীণ কম্পোনেন্টের উপর নির্ভরশীল থাকে।

Contextual Components কী?

Ember.js-এ Contextual Components এক ধরনের কম্পোনেন্ট যা block syntax ব্যবহার করে, অর্থাৎ আপনি block content পাস করতে পারেন এবং সেই কনটেন্টের মাধ্যমে কম্পোনেন্টের ভেতরের টেমপ্লেট বা আচরণ কাস্টমাইজ করতে পারেন। এটি {{yield}} টেমপ্লেট হেল্পারের মাধ্যমে কাজ করে।

এই ধরনের কম্পোনেন্টে, আপনি dynamic block content পাস করতে পারবেন এবং সেই কনটেক্সটে কম্পোনেন্টের আচরণ পরিবর্তন করতে পারবেন।

Contextual Components ব্যবহারের উদাহরণ

১. Contextual Component তৈরি করা

ধরা যাক, আমাদের একটি button কম্পোনেন্ট আছে যা dynamic content গ্রহণ করবে এবং যেটি অন্য কম্পোনেন্টের ভেতরে ব্লক হিসেবে ব্যবহার করা হবে।

1. Button কম্পোনেন্ট তৈরি করা:

ember generate component button

এটি app/components/button.js এবং app/templates/components/button.hbs ফাইল তৈরি করবে।

2. Button কম্পোনেন্টের JavaScript ফাইল:

// app/components/button.js
import Component from '@glimmer/component';

export default class ButtonComponent extends Component {
  // এখানে যেকোনো অতিরিক্ত লজিক হতে পারে
}

3. Button কম্পোনেন্টের Handlebars টেমপ্লেট:

<!-- app/templates/components/button.hbs -->
<button>
  {{yield}}  <!-- Yielding the block content -->
</button>

এখানে, {{yield}} ব্যবহার করা হয়েছে, যার মাধ্যমে আপনি button কম্পোনেন্টের ভিতরে যে কনটেন্ট পাস করবেন, তা রেন্ডার হবে।

২. Contextual Component ব্যবহার করা

এখন, এই button কম্পোনেন্টটিকে অন্য একটি টেমপ্লেটে ব্যবহার করা যাক এবং টেমপ্লেটের ব্লক হিসেবে কনটেন্ট পাস করি:

<!-- app/templates/application.hbs -->
<Button>
  Click Me!
</Button>

এখানে, <Button> কম্পোনেন্টে Click Me! টেক্সট ব্লক হিসেবে পাস করা হয়েছে। যখন এটি রেন্ডার হবে, তখন {{yield}} কম্পোনেন্টের ভিতরে Click Me! প্রদর্শিত হবে।

৩. Contextual Component এর ব্যবহার আরও জটিল করা

এখন, ধরা যাক, আপনি একটি card কম্পোনেন্ট তৈরি করতে চান যা ব্যবহারকারীর তথ্য শো করবে এবং আপনি সেই তথ্য কাস্টমাইজ করতে চান।

1. Card কম্পোনেন্ট তৈরি করা:

ember generate component card

2. Card কম্পোনেন্টের JavaScript ফাইল:

// app/components/card.js
import Component from '@glimmer/component';

export default class CardComponent extends Component {
  // এখানে যেকোনো অতিরিক্ত লজিক হতে পারে
}

3. Card কম্পোনেন্টের Handlebars টেমপ্লেট:

<!-- app/templates/components/card.hbs -->
<div class="card">
  <h3>{{@title}}</h3>
  <div class="card-content">
    {{yield}}  <!-- Yielding the block content inside the card -->
  </div>
</div>

এখানে, {{@title}} পাস করা হয়েছে, যা প্রপস হিসেবে card কম্পোনেন্টে পাঠানো হবে। আর {{yield}} কম্পোনেন্টের ভিতরে কাস্টম কনটেন্ট রেন্ডার করবে।

4. Card কম্পোনেন্ট ব্যবহার করা:

<!-- app/templates/application.hbs -->
<Card @title="User Profile">
  <p>This is the user's profile description.</p>
</Card>

এখানে, <Card> কম্পোনেন্টের মধ্যে @title প্রপস পাঠানো হয়েছে, যা "User Profile" হবে, এবং ব্লক হিসেবে "This is the user's profile description." পাঠানো হয়েছে, যা {{yield}} এর মাধ্যমে card-content এর মধ্যে রেন্ডার হবে।

Contextual Components এর আরও ব্যবহার

১. Dynamic Blocks with Multiple Yields

এটি খুবই কার্যকরী হতে পারে যখন আপনি একাধিক ব্লক রেন্ডার করতে চান। আপনি একাধিক {{yield}} ব্যবহার করে একাধিক ব্লক রেন্ডার করতে পারেন।

<!-- app/templates/components/modal.hbs -->
<div class="modal">
  <div class="modal-header">
    {{yield header}}  <!-- Yielding the header block -->
  </div>
  <div class="modal-body">
    {{yield body}}  <!-- Yielding the body block -->
  </div>
</div>

এখন, এই কম্পোনেন্টে দুটি ব্লক পাস করা যাবে:

<!-- app/templates/application.hbs -->
<Modal>
  <:header>
    <h1>Modal Header</h1>
  </:header>
  <:body>
    <p>This is the body content of the modal.</p>
  </:body>
</Modal>

এখানে, :header এবং :body ব্লক কনটেন্ট পাস করা হয়েছে এবং তারা {{yield header}} এবং {{yield body}} এর মাধ্যমে রেন্ডার হবে।

Contextual Components এর সুবিধা

1. Reusable Components: Contextual components আপনাকে একটি কম্পোনেন্ট তৈরি করতে দেয় যা বিভিন্ন কনটেক্সটের জন্য কাস্টমাইজ করা যায়। আপনি এক কম্পোনেন্টের ভিতরে বিভিন্ন কনটেন্ট পাস করতে পারেন, যার ফলে কোড পুনঃব্যবহারযোগ্যতা বৃদ্ধি পায়।
2. Flexibility and Customization: আপনি সহজেই ব্লক কনটেন্টের মাধ্যমে কম্পোনেন্টের আচরণ কাস্টমাইজ করতে পারেন, যা UI এর অধিক নমনীয়তা প্রদান করে।
3. Improved Readability: Ember.js এর Contextual Components ফিচার আপনার কোডের পাঠযোগ্যতা এবং ডেভেলপমেন্টের দক্ষতা বাড়ায়, কারণ এতে কোডের পুনঃব্যবহারযোগ্যতা এবং কনট্রোল বৃদ্ধি পায়।

Contextual Components হল Ember.js এর একটি শক্তিশালী বৈশিষ্ট্য, যা কম্পোনেন্টের মধ্যে কাস্টম ব্লক কনটেন্ট পাস করতে এবং সেই কনটেন্টের উপর ভিত্তি করে কম্পোনেন্টের আচরণ পরিবর্তন করতে সহায়ক। এটি আপনার অ্যাপ্লিকেশনকে আরও নমনীয়, পুনঃব্যবহারযোগ্য এবং কাস্টমাইজযোগ্য করে তোলে। Ember.js-এর block-level components বা contextual components ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনটিকে আরও দক্ষ ও উন্নত করতে পারেন।